<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <!-- <div class="container">
        <button class="like-btn">
            <span class="like-text">点赞</span>
            <span>👍</span>
        </button>
    </div> -->
    <script>
        /* const button = document.querySelector('.like-btn')
        const buttonText = button.querySelector('.like-text')
        let isLiked = false
        button.addEventListener('click', () => {
            isLiked = !isLiked
            if (isLiked) {
                buttonText.innerHTML = '取消'
            } else {
                buttonText.innerHTML = '点赞'
            }
        }) */
    </script>
    <div class="wrapper"></div>

    <!-- <script>
        const createDOMFromString = (domString) => {
            const div = document.createElement('div')
            div.innerHTML = domString
            return div
        }
        class LikeButton {
            constructor () {
                this.state = {
                    isLiked: false
                }
            }
            setState (state) {
                const oldEl = this.el
                this.state = state
                this.el = this.render()
                if (this.onStateChange) {
                    this.onStateChange(oldEl, this.el)
                }
            }
            changeLikeText () {
                this.setState({
                    isLiked: !this.state.isLiked
                })
            }
            render () {
                this.el = createDOMFromString(`
                    <button class="like-btn">
                        <span class="like-text">${this.state.isLiked ? '取消' : '点赞'}</span>
                        <span>👍</span>
                    </button>
                `)
                this.el.addEventListener('click', this.changeLikeText.bind(this), false)
                return this.el
            }
        }
        const wrapper = document.querySelector('.wrapper')
        const likeButton1 = new LikeButton()
        wrapper.appendChild(likeButton1.render())
        likeButton1.onStateChange = (oldEl, newEl) => {
            wrapper.insertBefore(newEl, oldEl)
            wrapper.removeChild(oldEl)
        }
        const likeButton2 = new LikeButton()
        wrapper.appendChild(likeButton2.render())

    </script> -->
    
    <!-- https://www.sitepoint.com/using-es-modules/ -->
    <script type="module" src="index.js"></script>
</body>
</html>